<template>
    <DialogForm
        v-if="visable"
        v-model="visable"
        title="编辑"
        auto
        ref="DialogFormRef"
        :formConfig="formConfig"
        :formData="formData"
        :rules="rules"
        @confirm="confirm"
    >
        <template slot="mavonEditor">
            <mavonEditor
                v-model="formData.str"
                @change="editorChange"
                className="h-vh-80"
                upload_file_url="about_me"
            ></mavonEditor>
        </template>
    </DialogForm>
</template>

<script>
import DialogForm from '@/components/async/dialogForm.vue'
export default {
    components: {
        mavonEditor: () => import('@/components/mavonEditor/bnEdit.vue'),
        DialogForm,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            formConfig: [
                {
                    label: '内容区',
                    type: 'customAll',
                    slot: 'mavonEditor',
                },
            ],
            formData: {
                str: '',
                html: '',
            },
            rules: {
                str: [{ required: true, message: '请输入内容', trigger: 'blur' }],
            },
        }
    },
    computed: {
        visable: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    async created() {
        const res = await this.$apis.get_about_me({
            type: 'edit',
        })
        if (this.isObject(res?.data?.data)) {
            Object.assign(this.formData, res.data.data)
        }
    },
    methods: {
        async confirm() {
            try {
                await this.$apis.post_about_me(this.formData)
                this.visable = false
                this.$emit('refresh', this.formData)
            } catch (err) {
                this.Toast(err)
            }
        },
        editorChange(row) {
            Object.assign(this.formData, row)
        },
    },
}
</script>

<style lang="scss" scoped></style>
